<template>
  <a-table
    :pagination="pagination"
    :rowKey="rowKey"
    :columns="columns"
    :rowSelection="{
      selectedRowKeys: selectedRowKeys,
      onChange: onSelectChange
    }"
    :data-source="data"
    @change="handleChange">
    <slot></slot>
  </a-table>
</template>

<script>
export default {
  name: 'STable',
  props: {
    rowKey: {
      type: String,
      default: 'id'
    },
    columns: {
      type: Array,
      default: () => []
    },
    selectedRowKeys: {
      type: Array,
      default: () => []
    },
    selectedRows: {
      type: Array,
      default: () => []
    },
    getData: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      data: [],
      pageNo: 1,
      pageSize: 10
    }
  },
  mounted () {
    this.getPage()
  },
  methods: {
    getPage () {
      this.data = this.getData({ pageNo: this.pageNo, pageSize: this.pageSize })
    },
    handleChange (showPagination) {
      console.log(showPagination)
      this.getData({ })
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.$emit('select', { selectedRowKeys, selectedRows })
    },
    refresh () {
      this.pageNo = 1
      this.getPage()
    }
  }
}
</script>

<style lang='scss' scoped>

</style>
